<template>
<div class="body_all">
    <div class="ba_top">
        <div>
            <el-input class="nameInput" v-model="searchList.name" placeholder="群名称" size="mini"></el-input>
            <el-input class="nameInput" v-model="searchList.owner_userid" placeholder="群主" size="mini"></el-input>
            <el-button style="margin-left: 8px" type="primary" icon="el-icon-search" size="mini" @click="btnSearch">搜索</el-button>
            <el-button type="refresh" icon="el-icon-refresh" @click="btnRefresh" size="mini">重置</el-button>
        </div>
    </div>
    <div class="ba_main">
        <el-table v-loading="loading" ref="multipleTable" :data="tableData" height="250" tooltip-effect="dark" class="ellipsis" style="width: 100%">
            <el-table-column label="群名称" fixed="left">
                <template slot-scope="scope">
                    <div class="edit_btn" @click="cdetails(scope.row)">
                        <span :title="scope.row.name">{{
                scope.row.name !== "" ? scope.row.name : "--"
              }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column width="300" label="跟进人状态">
                <template slot-scope="scope">
                    <span v-if="scope.row.status==0">跟进人正常</span>
                    <span v-else-if="scope.row.status==1">跟进人离职</span>
                    <span v-else-if="scope.row.status==2">离职继承中</span>
                    <span v-else-if="scope.row.status==3">离职继承完成</span>
                    <span v-else>--</span>
                </template>
            </el-table-column>
            <el-table-column width="200" label="类型">
                <template slot-scope="scope">
                    <span>{{ scope.row.type == 1 ? "售前" : "售后" }}</span>
                </template>
            </el-table-column>
            <el-table-column width="200" label="群主">
                <template slot-scope="scope">
                    <span>{{
              scope.row.owner_user !== "" ? scope.row.owner_user : "--"
            }}</span>
                </template>
            </el-table-column>
            <el-table-column width="200" label="群状态">
                <template slot-scope="scope">
                    <span>{{ scope.row.state == 1 ? "未解散" : "已解散" }}</span>
                </template>
            </el-table-column>
            <el-table-column width="200" label="创建时间">
                <template slot-scope="scope">
                    <span>{{ scope.row.create_time!=="" ? scope.row.create_time : "--" }}</span>
                </template>
            </el-table-column>

            <!-- <el-table-column prop="date" label="群主"> </el-table-column>
        <el-table-column prop="name" label="群活跃度"> </el-table-column>
        <el-table-column prop="address" label="群人数" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="date" label="今日入群数"> </el-table-column>
        <el-table-column prop="date" label="今日退群数"> </el-table-column>
        <el-table-column prop="name" label="今日消息数"> </el-table-column>
        <el-table-column prop="address" label="建群时间" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="date" label="群标签"> </el-table-column>
        <el-table-column prop="date" label="会话存档"> </el-table-column>
        <el-table-column prop="name" label="关联企业"> </el-table-column>
        <el-table-column prop="address" label="群状态" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="date" label="解散时间"> </el-table-column> -->
            <!-- <el-table-column prop="address" label="操作" fixed="right">
          <span class="edit_btn" @click="dialogDetails = true">群详情</span>
          <span class="edit_btn" style="margin-left: 10px" @click="showEditer"
            >设置</span
          >
        </el-table-column> -->
        </el-table>
        <div class="footer">
            <span style="margin-right: 10px">共{{ datanumber }}条</span>
            <span :class="searchList.page == 1 ? 'ban_btn_no' : ''">
                <i class="el-icon-arrow-left operable" :class="searchList.page == 1 ? 'pageOff' : 'pageOn'" @click="prevPage"></i>
            </span>
            <div style="display: inline; margin: 0 10px">
                <el-input :title="searchList.page" style="width: 60px" v-model="searchList.page" @change="sizechange()" size="mini"></el-input>
                <span style="margin: 0 5px 0 15px">/</span>
                <span>{{ pagenumber == 0 ? "1" : pagenumber }}</span>
            </div>
            <span :class="seenumber > datanumber ? 'ban_btn_no' : ''">
                <i class="el-icon-arrow-right operable" :class="seenumber > datanumber ? 'pageOff' : 'pageOn'" @click="nextPage"></i>
            </span>
            <span style="margin-left: 10px">每页</span>
            <el-select style="width: 70px" v-model="searchList.size" @change="sizechange()" placeholder="请选择" size="mini">
                <el-option v-for="item in sizennList" :key="item.value" :label="item.value" :value="item.value">
                </el-option>
            </el-select>
            条
        </div>
    </div>
    <!-- 新增编辑 -->
    <el-dialog title="群设置" :visible.sync="dialogEditer" width="45%" :close-on-press-escape="false">
        <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <h4>群标签设置</h4>
            <el-form-item label="设置标签">
                <el-select v-model="ruleForm.label" placeholder="请选择标签">
                    <el-option v-for="item in labelList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <h4>关联企业</h4>
            <el-form-item label="企业" prop="enterprise">
                <el-select v-model="ruleForm.enterprise" placeholder="请选择企业">
                    <el-option label="区域一" value="0"></el-option>
                    <el-option label="区域二" value="1"></el-option>
                </el-select>
                <i id="addComphone" class="el-icon-plus" style="color: #0276fe">新增</i>
            </el-form-item>
        </el-form>
        <div class="foot_btn">
            <el-button @click="resetForm('ruleForm')">取消</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        </div>
    </el-dialog>
    <detailsGroup ref="detailsGroup" :isreturn="0" :parentdetails="parentdetails" :owner_user="owner_user"></detailsGroup>
</div>
</template>

<script>
export default {
    components: {
        detailsGroup: () => import('../pageWorld/detailsGroup.vue'),
    },
    data() {
        return {
            loading: false,
            dialogDetails: false,
            dialogEditer: false,
            parentdetails: "",
            // 搜索条件
            sizennList: [{
                value: 20
            }, {
                value: 50
            }, {
                value: 100
            }],
            searchList: {
                page: 1,
                size: "20",
                name: "",
                owner_userid: "",
            },
            owner_user: "", // 群主
            datanumber: "0",
            seenumber: "0",
            pagenumber: "0",
            ruleForm: {
                label: "",
                enterprise: "",
            },
            labelList: [],
            tableData: [],
        };
    },
    created() {
        this.loading = true;
        this.getLabel();
        this.getData();
    },
    methods: {
        // 获取标签下拉数据
        getLabel() {
            this.$cmsapi.labelLibraryList("").then(
                (res) => {
                    if (res.code == 0) {
                        this.labelList = res.data;
                    } else {
                        this.$message.error(res.msg);
                    }
                },
                (err) => {
                    console.log(err);
                }
            );
        },
        // 获取列表数据
        getData() {
            this.$cmsapi.groupchatList(this.searchList).then(
                (res) => {
                    if (res.code == 0) {
                        this.seenumber = this.searchList.size * this.searchList.page;
                        this.datanumber = res.count;
                        this.pagenumber = Math.ceil(res.count / this.searchList.size);
                        this.tableData = res.data;
                    } else {
                        this.$message.eror(res.msg);
                    }
                    this.loading = false;
                },
                (err) => {
                    console.log(err);
                    this.loading = false;
                }
            );
        },
        // 最大条数变化
        sizechange() {
            this.loading = true;
            this.getData();
        },
        //上一页
        prevPage() {
            this.loading = true;
            this.searchList.page -= 1;
            this.getData();
        }, // 下一页
        nextPage() {
            this.loading = true;
            this.searchList.page += 1;
            this.getData();
        },

        // 搜索
        btnSearch() {
            this.loading = true;
            this.getData();
        },
        // 条件重置
        btnRefresh() {
            this.searchList = this.$options.data().searchList;
            this.loading = true;
            this.getData();
        },
        // 查看群详情
        cdetails(obj) {
            this.parentdetails = obj.chat_id;
            this.owner_user = obj.owner_user;
            this.$refs.detailsGroup.cDetails = true;
        },
        // 新增编辑
        showEditer() {
            this.dialogEditer = true;
        },
        // 提交
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert("submit!");
                    this.dialogEditer = false;
                    this.ruleForm = this.$options.data().ruleForm;
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        // 重置&取消
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.dialogEditer = false;
            this.ruleForm = this.$options.data().ruleForm;
        },
    },
};
</script>

<style scoped>
@import "../../assets/css/workbenchC/statisticsC.css";

#addComphone,
#addPhone,
#removePhone {
    cursor: pointer;
}
</style>
